<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-main>
      <el-scrollbar>
        <el-button @click="openEditCouponDialog(0)">新建</el-button>
        <el-table :data="tableData">
          <el-table-column prop="id" label="优惠卷编号" width="120" />
          <el-table-column prop="shopId" label="店铺id" width="120" />
          <el-table-column prop="rule" label="规则类型" width="120" />
          <el-table-column prop="ruleDetail" label="规则细节" width="120" />
          <el-table-column prop="time" label="有效期" width="370" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="openEditCouponDialog(scope.row.id)">编辑</el-button>
              <el-button @click="openDeleteCouponDialog(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
  </el-container>
  <coupon-c-u ref="CouponCURef" />
  <coupon-d ref="CouponDRef" />
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import { getCouponByShopId } from "../../api/coupon/"
import { ElContainer } from 'element-plus';
import { useRouter } from 'vue-router'
const router = useRouter();
import CouponCU from './CouponCU.vue';
import CouponD from './CouponD.vue';

const shopId = router.currentRoute.value.query.shopId;
// 获取店铺优惠卷
const Couton = getCouponByShopId({ shopId: shopId })
let tableData = ref([])
Couton.then((res) => {
  if (res.code === 200) {
    tableData.value = res.data
  }
})

// 打开增改优惠卷页面
let CouponCURef = ref()
const openEditCouponDialog = (couponId: number) => {
  //子组件方法
  CouponCURef.value.openDialog(couponId);
}
// 打开删除优惠卷页面
let CouponDRef = ref()
const openDeleteCouponDialog = (couponId: number) => {
  //子组件方法
  CouponDRef.value.openDialog(couponId);
}

</script>
  
<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
  